<template>
  <div class="work-order-container">
    <common-head
      :showCreateOrderButton="true"
      :showIcon="false"
      @createOrder="createOrder"
      :title="'工单管理'"
      :back="true"
      :right="false"
    />
    <div class="container">
      <div
        v-for="(order, index) in workOrders"
        :key="index"
        class="card"
        @click="showOrderDetails(order)"
      >
        <div class="order-head">
          <span
            class="order-type"
            :style="{
              backgroundColor: getOrderColor(order.type).background,
              borderColor: getOrderColor(order.type).border,
              color: getOrderColor(order.type).color
            }"
            >{{ getTypeText(order.type) }}</span
          >
          <div class="order-title">{{ order.content }}</div>
        </div>
        <div
          class="status-tag"
          :class="getStatusClass(order.verificationStatus)"
        >
          {{ getStatusText(order.verificationStatus) }}
        </div>
        <div class="card-content">
          <p><strong>创建人：</strong>{{ order.createBy }}</p>

          <!-- <p><strong>工单内容：</strong>{{ order.content }}</p> -->
          <div class="info-row">
            <p><strong>工单类型：</strong>{{ getTypeText(order.type) }}</p>
          </div>
          <!-- 分割线 -->
          <div class="divider" v-if="order.verificationStatus != 1"></div>
          <p v-if="order.verificationStatus != 1">
            <strong>处理反馈：</strong>{{ order.processingFeedback }}
          </p>

          <p v-if="order.verificationStatus != 1">
            <strong>处理人：</strong>{{ order.processor }}
          </p>

          <div class="order-time">创建时间：{{ order.createTime }}</div>
        </div>
        <div>
          <!-- <van-button
            type="primary"
            @click="showOrderDetails(order)"
            size="small"
            class="create-btn"
          >
            处理
          </van-button> -->
        </div>
      </div>
    </div>
    <van-dialog
      v-model="show"
      :show-confirm-button="false"
      :show-cancel-button="false"
    >
      <workForm @updataOrderList="getOrderList" @close="close"></workForm>
    </van-dialog>

    <van-dialog
      v-model="showModifyPlateDialog"
      title="处理工单"
      show-cancel-button
      @confirm="confirmModifyPlate"
    >
      <updateOrder
        ref="formRef"
        @updateSuccess="getOrderList"
        :updateOrderDeatil="updateOrderDeatil"
      ></updateOrder>
    </van-dialog>
  </div>
</template>

<script>
import commonHead from "../../components/xc/commonHead.vue";
import workForm from "./orderForm.vue";
import updateOrder from "./updateOrder.vue";

export default {
  components: { commonHead, workForm, updateOrder },
  data() {
    return {
      workOrders: [],
      show: false,
      showModifyPlateDialog: false,
      updateOrderDeatil: {}
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    getOrderColor(status) {
      const type = Number(status); // 转换为数字
      switch (type) {
        case 1: // 巡检工单 - 蓝色系
          return {
            background: "#DFF0FF",
            border: "#A9CCE3",
            color: "#1E94E0"
          };
        case 2: // 维护工单 - 黄色系
          return {
            background: "#FFF8DC",
            border: "#F5E6C8",
            color: "#D79B00"
          };
        case 3: // 紧急维修 - 红色系
          return {
            background: "#FFE4E1",
            border: "#F9C2B1",
            color: "#E84D3D"
          };
        default:
          return {
            background: "#FFE4E1",
            border: "#F9C2B1",
            color: "#E84D3D"
          };
      }
    },
    // 确定修改工单函数
    confirmModifyPlate() {
      if (this.$refs && this.$refs.formRef) {
        this.$refs.formRef.updataOrder();
      }
    },
    showOrderDetails(order) {
      // 订单详情逻辑
      this.showModifyPlateDialog = true;
      this.updateOrderDeatil = order;
    },
    // 工单类型
    getTypeText(type) {
      // 初步定义 工单类型 1 巡检工单 2 维护工单 3 紧急维修
      switch (type) {
        case "1":
          return "巡检工单";
        case "2":
          return "维护工单";
        case "3":
          return "紧急维修";
      }
    },
    getStatusText(status) {
      // 初步定义 处理状态字典 1：待处理 2.处理中   3.已处理 4.未知状态
      switch (status) {
        case "1":
          return "待处理";
        case "2":
          return "处理中";
        case "3":
          return "已处理";
        default:
          return "未知状态";
      }
    },
    // 获取状态类名
    getStatusClass(status) {
      switch (status) {
        case "1":
          return "pending";
        case "2":
          return "processed";
        case "3":
          return "feedback";
        default:
          return "";
      }
    },
    close() {
      this.show = false;
    },
    // 创建工单函数
    createOrder() {
      this.show = true;
    },
    // 查询工单列表
    async getOrderList() {
      this.baseService
        .get("/parking/inspectionWorkOrderDispatch/page", {})
        .then(res => {
          this.workOrders = res.result.records;
        });
    }
  }
};
</script>
<style scoped>
.container {
  background-image: linear-gradient(to right, #cee7ff, #a5d3ff);
  padding: 10px;
  min-height: calc(100vh - 110px);
}
.card {
  border: 1px solid #e4e4e4;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.card-content {
  margin-bottom: 15px;
}
.card-content p {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.card-content strong {
  color: #555;
  min-width: 70px;
  display: inline-block;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.card-actions button {
  margin-right: 12px;
  padding: 8px 16px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.order-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-left: 10px;
  flex: 1;
  min-width: 200px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-actions button:nth-child(1) {
  background-color: #409eff;
  color: white;
}
.card-actions button:nth-child(2) {
  background-color: #f39c12;
  color: white;
}
.card-actions button:hover {
  opacity: 0.9;
}
.order-head {
  display: flex;
  justify-content: start;
  align-items: center;
}
.order-type {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  height: 18px;
  text-align: center;
  padding: 0px 4px;
  border-radius: 3px;
  border: 1px solid;
}

.status-tag {
  position: absolute;
  top: 20px;
  right: 0px;
  padding: 4px 10px;
  font-size: 12px;
  color: #fff;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  z-index: 1;
}
.order-time {
  position: absolute;
  bottom: 10px;
  right: 20px;
  font-size: 12px;
  color: #888;
  margin: 0;
}

.status-tag.pending {
  background-color: #f39c12; /* 待处理 - 黄色 */
}

.status-tag.processed {
  background-color: #28a745; /* 已处理 - 绿色 */
}

.status-tag.feedback {
  background-color: #3498db; /* 已反馈 - 蓝色 */
}

.info-row {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.info-row p {
  font-size: 14px;
  color: #333;
  margin: 0;
  width: 48%; /* 控制两列之间留点空隙 */
}

.info-row strong {
  min-width: 70px;
  display: inline-block;
  color: #555;
}
.divider {
  border-top: 1px solid #eee;
  margin: 10px 0;
  padding: 0;
  width: 100%;
  height: 1px;
}
</style>
